import { useState, useTransition, memo } from "react";

function SlowPost({ index }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // 每个 item 都等待 1 毫秒以模拟极慢的代码。
  }

  return <li className="item">Post #{index + 1}</li>;
}

const SearchResult = memo(({ query }) => {
  if (!query) {
    return null;
  }

  // 定义一个搜索结果
  const items = [];

  // 循环往 item 中增加内容
  for (let i = 1; i < 1000; i++) {
    items.push(<SlowPost key={i} index={i} />);
  }

  return <ul>{items}</ul>;
});

export default function App() {
  // query 给到 input 使用
  const [query, setQuery] = useState("");
  // queryTwo 给到 SearchResult 使用
  const [queryTwo, setQueryTwo] = useState("");

  const [isPending, startTransition] = useTransition();

  console.log(`App Render query: ${query} | queryTwo: ${queryTwo}`);

  const handleChange = (e) => {
    setQuery(e.target.value);

    startTransition(() => {
      // 将 setQueryTwo 标记为过渡任务，可以被中止，不影响任务
      setQueryTwo(e.target.value);
    });
  };
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={handleChange} />
      </label>

      <SearchResult query={queryTwo} />
    </>
  );
}

/**
 * 初始状态：
 *    query: ''   queryTwo ''
 *    页面直接渲染没有阻塞
 *
 * 输入1
 *    引入组件渲染两次
 *    第一次：query: '1'  queryTwo ''
 *      页面渲染没有阻塞
 *    第二次：query: '1'  queryTwo '1'
 *      页面渲染有阻塞
 *
 * 输入2
 *    引入组件渲染两次
 *    第一次：query: '12' queryTwo: '1'
 *      App 组件要渲染
 *      App 子组件 SearchResult 也要渲染，只是这次 SearchResult 获取的 prop 是相同的
 *
 *    第二次: query: '12' queryTwo: '12'
 *      App 组件要渲染
 *      App 子组件 SearchResult 也要渲染，只是这次 SearchResult 获取的 prop 是不同的
 *
 *
 * ----
 *
 * 快速输入12
 *    引入组件渲染四次
 *    第一次  query: '1'    queryTwo: ''
 *      页面渲染出 input 输入框
 *    第二次  query: '1'    queryTwo: '1'
 *      有阻塞，要等待 1000 ms 才能完成渲染
 *      【由于有下一个紧急任务，该渲染就会中止了】
 *    第三次  query: '12'   queryTwo: '1'
 *      input 的 value 为 ‘12’
 *    第四次  query: '12'   queryTwo: '12'
 *      有阻塞，要等待 1000 ms 才能完成渲染
 *
 */
